<template>
  <a-modal
    :title="title"
    width="45%"
    :visible="messageVisible"
    :confirm-loading="confirmLoading"
    @cancel="cancel"
    @ok="ok"
  >
    <a-form-model
      ref="editMessages"
      :model="formDatas"
      :rules="editMessagerules"
      layout="vertical"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 17 }"
    >
      <a-form-model-item label="标题" prop="title">
        <a-input v-model="formDatas.title" placeholder="请输入标题" />
      </a-form-model-item>
      <a-form-model-item label="内容" prop="content">
        <!-- <a-input v-model="formDatas.content" placeholder="请输入内容" /> -->
        <!-- <quills :contents.sync="formDatas.content"></quills> -->
        <quill-editor v-model="formDatas.content"></quill-editor>
      </a-form-model-item>
      <a-form-model-item label="消息推送结束时间">
        <a-date-picker
          v-model="formDatas.end_time"
          show-time
          type="date"
          format="YYYY-MM-DD HH:mm:ss"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          placeholder="消息推送结束时间"
        />
      </a-form-model-item>
      <a-form-model-item label="是否首推">
        <a-radio-group v-model="formDatas.is_first_push">
          <a-radio :value="1"> 是 </a-radio>
          <a-radio :value="0"> 否 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="状态">
        <a-radio-group v-model="formDatas.status">
          <a-radio :value="1"> 正常 </a-radio>
          <a-radio :value="0"> 禁用 </a-radio>
        </a-radio-group>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { editMessageListApi, addMessageListApi } from '@/api/brand.js'
export default {
  components: {},
  data() {
    return {
      messageVisible: false,
      title: '添加',
      confirmLoading: false,
      loading: false,
      formDatas: {
        title: '',
        content: '',
        end_time: '',
        is_first_push: '',
        status: 1
      },
      editMessagerules: {
        title: [{ required: true, message: '请输入标题名称', trigger: 'blur' }],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      }
    }
  },
  methods: {
    openEditMessage(json) {
      if (json) {
        this.title = '修改信息'
        this.formDatas = {
          title: json.title,
          content: json.content,
          end_time: json.end_time,
          is_first_push: json.is_first_push,
          status: json.status,
          ids: json.id
        }
      } else {
        this.formDatas = {
          ids: '',
          title: '',
          content: '',
          end_time: '',
          is_first_push: 1,
          status: 1
        }
        this.title = '添加'
      }
      this.messageVisible = true
    },
    handleOk() {
      this.messageVisible = false
    },
    cancel() {
      this.handleOk()
    },
    ok() {
      this.$refs.editMessages.validate(valid => {
        if (valid) {
          if (this.formDatas.ids) {
            this.editLists()
          } else {
            this.addsLists()
          }
        }
      })
    },

    editLists() {
      editMessageListApi({ ...this.formDatas, brand_id: process.env.VUE_APP_BRAND_ID }).then(res => {
        this.$message.success('操作成功')
        this.$message.success('操作成功')
        this.handleOk()
        this.$emit('changes')
      })
    },
    addsLists() {
      addMessageListApi(this.formDatas).then(res => {
        this.handleOk()
        this.$emit('changes')
      })
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .ql-container .ql-snow {
  height: 200px;
}
</style>
